<template>
	<view class="app">
		<navBar></navBar>
		<view style="margin-top: 5%;"></view>
		<!-- <view class="card">
			<view style="display:flex;border-bottom: 1px dashed #ADADAD; height: 50px;align-items: center;">
				<view style="font-size: 12px;color: rgb(165, 10, 13);flex-grow: 2;">
					{{trialReading}}
				</view>
				<uni-icon type="forward" size="20" color="#ADADAD"></uni-icon>
			</view>
			<view class="cBottom" style="font-size: 15px">
				<view style="">当前余额</view>
				<view><button class="mini-btn" type="warn" size="mini">去赚钱</button></view>
			</view>
		</view> -->
		<!-- 图书列表 -->
		<view v-for="l in list" class="list" :key="l">
			<view class="left">
				<image style="width: 65px;height: 85px;border-radius: 5%;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg"></image>
			</view>
			<view class="right" style="margin-left: 5%;margin-bottom: 5%;">
				<view class="rTitle" style="font-family: cursive;font-size: 23px;">家园</view>
				<view class="rContent" style="color: #A6A6A6;font-size: 16px;">2019年6月6日</view>
			</view>
		</view>
		<!-- 添加喜欢的小说 -->
		<view class="list" @click="addBook">
			<view class="left" style="background-color: #DCDCDC;">
				<view style="width: 65px;height: 85px;border-radius: 5%;display: flex; justify-content: center; align-items: center;">
					<uni-icon type="plusempty" size="50"></uni-icon>
				</view>
			</view>
			<view class="right" style="margin-left: 10%;margin-bottom: 10%;">
				<view class="rTitle" style="font-family: cursive;font-size: 20px;color: gray;">添加你喜欢的小说</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniList,
		uniListItem,
		uniIcon
	} from "@dcloudio/uni-ui"
	import navBar from "../../components/navBar/navBar.vue"
	export default {
		data() {
			return {
				list: [1, 2, 3, 4],
				trialReading: '【试读书单】本期有热播剧原著《霸道总裁爱上我》'
			};
		},
		components: {
			navBar,
			uniList,
			uniListItem,
			uniIcon
		},
		methods: {
			addBook() {
				uni.switchTab({
					url: '../bookCity/bookCity'
				})
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.app {
		background-color: rgb(255, 255, 253);
	}

	.list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding: 10px 15px;
	}

	.card {
		margin: 10px 10px;
		border-radius: 3%;
		margin-top: 5%;
		border: 1px solid #DCDCDC;
		box-shadow: 5px 5px 2px #DCDCDC;
	}

	.cBottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 10px;
	}
</style>
